<template>
  <div class="body-box">
    <div class="cation-process">
      <el-steps :active="process" align-center>
        <el-step title="选择认证类型" description></el-step>
        <el-step title="填写认证信息" description></el-step>
        <el-step title="提交认证" description></el-step>
      </el-steps>
    </div>
    <!-- 认证类型选择 -->
    <div class="cation-type-box" v-if="process == 1">
      <el-row :gutter="20">
        <el-col :span="8" v-for="(item,key) in process_type">
          <div
            class="cation-type"
            shadow="never"
            @click="changeType(key)"
            :style="type_index == key ? 'border-color: #8a70c6 ' : ''"
          >
            <div class="cation-type-title">
              <img :src="item.img" alt />
              <span class="cation-type-title-msg">{{item.name}}</span>
            </div>
            <div class="cation-type-memo">{{item.memo}}</div>
            <ul class="cation-memo-msgs-list">
              <li>{{item.msg1}}</li>
              <li>{{item.msg2}}</li>
              <li>{{item.msg3}}</li>
            </ul>
            <div class="cation-type-check" v-if="type_index == key"></div>
            <img
              class="cation-type-common"
              src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/tjRzIcon.png"
              v-if="key == 1"
            />
            <img
              class="cation-type-common-msg"
              src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/qyHintIcon.png"
              v-if="key == 1"
            />
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 认证表单 -->
    <div class="cation-type-box" v-if="process == 2">
      <div v-if="type_index == 0">
        <cation-gr @change="changeForm"></cation-gr>
      </div>
      <div v-if="type_index == 1">
        <cation-qy @change="changeForm"></cation-qy>
      </div>
      <div v-if="type_index == 2">
        <cation-zz @change="changeForm"></cation-zz>
      </div>
    </div>
    <div class="cation-type-box" v-if="process == 3">
      <div class="cation-toast">提交成功</div>
      <div class="cation-msg-process">认证信息已提交至平台进行审核，预计在1-3个工作日内处理完成</div>
    </div>
    <div class="process-btn-box">
      <el-button
        class="process-next-btn"
        v-if="process > 1 && process < 3"
        @click="lastProcess()"
      >上一步</el-button>
      <el-button
        class="com-btn process-next-btn"
        @click="nextProcess()"
        v-if="process < 3"
      >{{process == 2 ? '提交' : '下一步'}}</el-button>
    </div>
  </div>
</template>

<script>
import cationGr from "./cation-gr";
import cationQy from "./cation-qy";
import cationZz from "./cation-zz";

export default {
  components: { cationGr, cationQy, cationZz },
  data() {
    return {
      process: 1,
      process_type: [
        {
          img: "https://ykp-new.oss-cn-hangzhou.aliyuncs.com/rz_type_gr.png",
          name: "个人认证",
          memo:
            "适合以个人名义举办活动的主办方，包括活动达人、垂直领域专家和其他自然人等。",
          msg1: "橙V个人认证标识",
          msg2: "活动排名加权1.0x",
          msg3: "仅支持提现到个人账户"
        },
        {
          img: "https://ykp-new.oss-cn-hangzhou.aliyuncs.com/rz_type_qy.png",
          name: "企业认证",
          memo:
            "适合以企业名义举办活动的主办方，包括公司、分支机构、企业相关品牌等。",
          msg1: "专属蓝V企业认证标识",
          msg2: "活动排名加权2.0x",
          msg3: "可提现到个人或对公账户"
        },
        {
          img: "https://ykp-new.oss-cn-hangzhou.aliyuncs.com/rz_type_zz.png",
          name: "组织认证",
          memo:
            "适合以组织机构名义举办活动的主办方，包括社会团体、公益组织、俱乐部等。",
          msg1: "专属蓝V组织认证标识",
          msg2: "活动排名加权2.0x",
          msg3: "可提现到个人或对公账户"
        }
      ],
      form: {},
      type_index: 1
    };
  },
  methods: {
    //form改变的时候
    changeForm(e) {
      this.form = e;
    },
    //改变认证方式
    changeType(key) {
      this.type_index = key;
    },
    //上一步
    lastProcess() {
      if (this.process == 2) {
        this.$confirm("是否退出当前认证?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.process > 1 ? this.process-- : (this.process = 1);
          })
          .catch(() => {
            return false;
          });
      } else {
        this.process > 1 ? this.process-- : (this.process = 1);
      }
    },
    //下一步
    nextProcess() {
      if (this.process == 2) {
        if (!this.form.email) return this.toast(0, "请输入邮箱");
        if (!this.form.phone) return this.toast(0, "请输入联系方式");
        if (!this.form.reason) return this.toast(0, "请输入认证理由");
        if (!this.form.card_up) return this.toast(0, "请上传身份证正面照片");
        if (!this.form.card_down) return this.toast(0, "请上传身份证反面照片");
        if (!this.form.card_person) return this.toast(0, "请上传手持身份证照片");
        switch (this.type_index) {
          case 0:
            this.checkGr();
            break;
          case 1:
            this.checkQy();
            break;
          case 2:
            this.checkZz();
            break;
        }
        this.setInService();
        return false;
      }
      this.process < 3 ? this.process++ : (this.process = 3);
    },
    //验证个人认证
    checkGr() {
      if (!this.form.user_name) return this.toast(0, "请输入姓名");
      if (!this.form.idcard) return this.toast(0, "请输入身份证号码");
      
    },
    //验证企业认证
    checkQy(){
      if (!this.form.user_name) return this.toast(0, "请输入法人姓名");
      if (!this.form.company_name) return this.toast(0, "请输入企业名称");
      if (!this.form.company_code) return this.toast(0, "请输入统一社会信用代码");
      if (!this.form.company_license) return this.toast(0, "请上传营业执照");
    },
    //验证组织认证
    checkZz(){
      if (!this.form.user_name) return this.toast(0, "请输入法人姓名");
      if (!this.form.organize_name) return this.toast(0, "请输入组织名称");
      if (!this.form.organize_code) return this.toast(0, "请输入登记编码");
      if (!this.form.organize_license) return this.toast(0, "请上传登记证图片");
    },
    //提交到后端
    setInService() {
      var data = JSON.parse(JSON.stringify(this.form));
      data.cation_type = this.type_index + 1;
      this.ajaxs("cation/addCationInfo", {
        data: data,
        success: res => {
          this.toast(res.code, res.msg);
          if (res.code) {
            this.process++;
          }
          console.log(res);
        }
      });
    }
  }
};
</script>

<style>
.cation-toast {
  height: 200px;
  width: 235px;
  background: url(https://ykp-new.oss-cn-hangzhou.aliyuncs.com/cation-msg.png);
  background-size: cover;
  background-repeat: no-repeat;
  margin: auto;
  text-align: center;
  line-height: 150px;
  font-size: 30px;
  color: #999;
}
.cation-msg-process {
  text-align: center;
  color: #666;
  margin-top: 20px;
}
.cation-process .el-step__title.is-finish {
  color: #8a70c6;
}
.cation-process .el-step__head.is-finish {
  color: #8a70c6;
}
.cation-process .el-step__head.is-finish .el-step__line-inner,
.cation-process .el-step__head.is-finish .el-step__icon.is-text {
  border-color: #8a70c6;
}
.cation-process {
  margin-top: 50px;
}
.cation-type-box {
  margin-top: 50px;
}
.cation-type {
  height: 270px;
  cursor: pointer;
  padding: 40px 20px;
  border: 2px solid #f1f1f1;
  border-radius: 2px;
  position: relative;
}
.cation-type-common {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
}
.cation-type-common-msg {
  position: absolute;
  top: -16px;
  left: 92px;
}
.cation-type-check {
  position: absolute;
  width: 60px;
  height: 61px;
  background: url(https://ykp-new.oss-cn-hangzhou.aliyuncs.com/54ccfa7adbf81f9a66b150d44b3e749.png);
  right: 0;
  bottom: 0;
}
.cation-type:hover {
  border-color: #8a70c6;
}
.cation-type-title {
  width: 100%;
  height: 50px;
  overflow: hidden;
  text-align: center;
  display: table-cell;
}
.cation-type-title > img {
  float: left;
  margin-left: 30px;
  height: 50px;
  line-height: 50px;
}
.cation-type-title-msg {
  float: left;
  font-size: 30px;
  margin-left: 20px;
  margin-top: 5px;
}
.cation-type-memo {
  margin: 20px 0;
  height: 40px;
  line-height: 20px;
}
.cation-memo-msgs-list {
  list-style: disc;
  padding-left: 20px;
  color: #65717f;
}
.cation-memo-msgs-list > li {
  line-height: 26px;
}
.process-btn-box {
  margin-top: 40px;
  text-align: center;
}
.process-next-btn {
  width: 150px;
}
</style>